<template>
    <div>
      <el-form :inline="true" :model="f1" class="demo-form-inline">
        <el-form-item label="泵站型号">
          <el-select v-model="f1.pumpId" placeholder="请选择">
            <el-option
              v-for="pump in pumplist"
              :label="pump.pumpname"
              :value="pump.id"
              :key="pump.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="日期">
            <el-date-picker
            v-model="f1.time"
            type="date"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="reset">清空</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="pumpdata" border style="width: 100%">
        <el-table-column fixed="left"  prop="time" label="时间" width="120">
        </el-table-column>
        <el-table-column prop="id" label="" width="150" v-if="false">
        </el-table-column>
        <el-table-column prop="pumpId" label="泵站Id" width="120" v-if="false">
        </el-table-column>     
        <el-table-column prop="inflow" label="进水流量" width="120">
        </el-table-column>
        <el-table-column prop="outflow" label="出水流量" width="120">
        </el-table-column>
        <el-table-column prop="complexflow" label="复线流量" width="120">
        </el-table-column>
        <el-table-column prop="inp" label="进水压力" width="120">
        </el-table-column>
        <el-table-column prop="outp" label="出水压力" width="120">
        </el-table-column>
        <el-table-column prop="incl" label="进水余氯" width="120">
        </el-table-column>
        <el-table-column prop="outcl" label="出水余氯" width="120" >
        </el-table-column>
        <el-table-column prop="intur" label="进水浊度" width="120">
        </el-table-column>
        <el-table-column prop="outtur" label="出水浊度" width="120">
        </el-table-column>
        <el-table-column prop="datatype" label="数据类型" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="danger" @click="del(scope.row.id)" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
       <el-pagination
       background
       layout="prev, pager, next"
       :total="total"
        :page-size="5"
        @current-change="goto"
   >
     </el-pagination>
    </div>
</template>
<script>
export default {
    data(){
        return{
           f1:{
             pumpId:'',
              time:'',
              pageIndex:1
           },
           pumplist:{},
           pumpdata:[],
           total:100,
        }
    },
    methods:{
        goto(currentpage){
           this.f1.pageIndex=currentpage;
           this.getpumpdata();
        },
        onSubmit(){
           this.getpumpdata();
        },
        getpumpdata(){
            this.axios.post("/gms/getpumpdata",this.f1).then(res=>{
                 console.log(res.data);
                 this.pumpdata=res.data.data.list;
                 this.f1.pageIndex=res.data.data.pageNum;
                 this.total=res.data.data.total;
            })
        },    
        del(id){
          this.axios.get("/gms/delpumpdata",{
              params:{
                  id:id
              }
          }).then(res=>{
            console.log(res.data);
                if (res.data.code == 200) {
                this.getpumpdata();
                this.$message({
              message: "成功",
              offset: 150,
              duration: 1000,
              type: "success",
            });}
          })
        },
        getAllpump(){
            this.axios.get("/gms/getallpump").then(res=>{
                this.pumplist=res.data.data;
            })
        },
        reset(){
            this.f1.pumpId='';
            this.f1.time='';
            this.f1.pageIndex=1;
            this.getpumpdata();
        }
    },
    created(){
        this.getpumpdata();
        this.getAllpump(); 
    }
}
</script>
<style scoped>

</style>